<template>
  <div class="play">
    <audio
      ref="musicplayer"
      autoplay
      :src="`https://music.163.com/song/media/outer/url?id=${musicID}.mp3`"
      @timeupdate="timeupdate"
    />
    <div class="playBar">
      <i>
        <div  ref="rotateImg_play" class="imgRoteta">
        <img  :src="song.al.picUrl" />
        </div>
      </i>

      <i @click="showFull">{{ song.name }}-{{ song.ar[0].name }}</i>

      <i>
        <canvas ref="canvas" width="50" height="50"></canvas>
        <span @click="togglePlay" :class="{ pused: !isPused }"></span>
      </i>
    </div>
    <div
      :class="{ showFuulrc: isFullLrc, hidFull: !isFullLrc }"
      class="fullLrc"
    >
      <div class="lrc-top">
        <span class="lrc-back" @click="isFullLrc = false"></span>
        <h3>{{ song.name }}-{{ song.ar[0].name }}</h3>
        <span class="lrc-more"></span>
      </div>
      <div class="lrc" v-show="!showRotate" @click="toggleRotate">
        <div>
          <ul
            :style="{
              transform: `translateY(-${lrcCurrent * 25}px)`,
            }"
          >
            <li
              v-for="(lrc, i) in lrcArr"
              :key="i"
              :class="{ active: i == lrcCurrent }"
            >
              {{ lrc.lyric }}
            </li>
          </ul>
        </div>
      </div>
      <div class="lrc-rotate" v-show="showRotate" @click="showRotate = false">
        <div class="rotate-top">
          <span class="left"><svg class="u-svg u-svg-logosong" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 184 34"><g fill="#fff"><path d="m78.74 14.27h14.52v-2.27h-14.52v2.27m-1.44 1.89c-.51-.03-.915-.44-.94-.95v-8.21c-.0001-.53.411-.968.94-1h17.37c.529.032.941.47.939 1v8.22c-.023.51-.43.92-.939.95l-17.37-.001m1.44-6h14.52v-2.23h-14.52v2.23"></path><path d="m95.49 18h-18c-.291.002-.563.139-.74.37l-1.86 2.63-1.89 2.55c-.078.108-.053.258.055.335.04.028.087.045.135.045h2.07c.165 0 .32-.078.42-.209l2.72-3.721h3.79l-6.77 9.311c-.077.113-.047.27.067.347.04.026.085.042.133.043h2c.17 0 .33-.082.43-.22l6.95-9.481h3.87l-6.78 9.32c-.077.107-.053.258.055.334.042.031.093.047.145.046h2.08c.155.003.302-.071.39-.2l6.9-9.5h2.41v5.73c0 .889-.721 1.609-1.611 1.609h-1.93c-.153.006-.296.079-.39.2l-1.27 1.76c-.083.11-.061.268.05.351.043.032.096.05.15.05h3.39c2.208 0 4-1.791 4-4v-6.761c0-.519-.42-.939-.939-.939"></path><path d="m126.14 15h-23.852c-.139.005-.25.12-.25.26v.62c-.004.762.609 1.385 1.371 1.39.002 0 .006 0 .001 0h6.209l-5.629 10.73c-.305.539-.113 1.222.426 1.525.174.1.373.148.574.145h19c.264.004.52-.08.73-.24.398-.316.535-.863.33-1.33l-3.102-6c-.051-.119-.168-.198-.299-.199h-1.811c-.188.002-.338.156-.336.344 0 .043.001.086.025.126l2.68 5h-15.439l5.381-10.18h13c.658-.019 1.193-.534 1.24-1.19v-.73c0-.144-.117-.26-.26-.26"></path><path d="m105.42 9.44h17.641c.725-.005 1.309-.595 1.309-1.32v-.66c0-.156-.123-.285-.279-.29h-19.721c-.166 0-.299.134-.299.3 0 .003 0 .007 0 .001v.6c-.006.746.594 1.354 1.34 1.36.0001 0 .005 0 .009 0"></path><path d="m66.69 6.33h-21.34c-.646 0-1.17.524-1.17 1.17 0 .003 0 .007 0 .001v22c0 .149.121.27.27.27h1.81c.149 0 .27-.12.27-.27v-20.82h19v17.12c0 .889-.721 1.609-1.61 1.609h-1.31c-.153-.002-.297.068-.39.189l-1.33 1.841c-.066.089-.048.214.04.28.034.025.077.039.12.039h2.85c2.159.002 3.93-1.711 4-3.869v-18.39c0-.652-.528-1.18-1.18-1.18"></path><path d="m61.43 24.63h2.08c.127-.0001.229-.104.228-.231 0-.038-.001-.075-.028-.108l-3.56-6.24 3.56-6.23c.066-.108.032-.25-.076-.316-.037-.023-.08-.035-.124-.034h-2.08c-.083.002-.159.048-.2.12l-2.38 4.17-2.39-4.17c-.042-.072-.117-.117-.2-.12h-2.08c-.127-.002-.232.099-.234.226-.0001.043.011.086.034.124l3.56 6.23-3.54 6.239c-.061.111-.02.251.092.312.033.019.07.028.108.028h2.08c.082.0001.158-.04.2-.11l2.39-4.18 2.38 4.18c.042.07.119.111.2.11"></path><path d="m54.47 18.15c.045-.074.045-.166 0-.24l-3.61-6.32c-.046-.072-.125-.117-.21-.12h-2.1c-.127-.002-.231.099-.234.226 0 .043.011.086.034.124l3.56 6.18-3.58 6.26c-.061.111-.02.252.092.313.033.018.07.027.108.027h2.1c.084.002.163-.04.21-.109l3.62-6.35"></path><path d="m145.37 13.89h-4.91l-2.539-4.45h10l-2.551 4.45m9.43 0h-6.799l2.539-4.45h1.41c.752 0 1.361-.609 1.361-1.36v-.64c0-.145-.115-.265-.262-.27h-8.729l-1.061-1.84c-.096-.175-.281-.283-.48-.28h-1.859c-.133-.007-.246.095-.252.228-.002.046.008.092.031.133l1 1.76h-8.859c-.152.005-.275.127-.279.28v.63c0 .751.607 1.36 1.359 1.36h1.42l2.539 4.45h-6.878c-.166 0-.301.134-.301.3v.62c0 .746.605 1.35 1.35 1.35h21.701c.729 0 1.32-.591 1.32-1.32v-.65c-.004-.154-.119-.281-.271-.301"></path><path d="m151.12 18c.625 0 1.131.506 1.131 1.13v9.47c0 .625-.506 1.131-1.131 1.131h-16.42c-.621-.006-1.125-.509-1.129-1.131v-9.47c.004-.622.508-1.124 1.129-1.13h16.42m-1.219 4.2v-2.11h-14v2.73h14v-.62m-14 5.441h14v-2.73h-14v2.73"></path><path d="m183.13 16.64v-.64c0-.132-.107-.24-.238-.24h-9.521v-4.91c-.004-.146-.125-.26-.27-.26h-.74c-.746-.005-1.354.595-1.359 1.34 0 .003 0 .006 0 .001v3.8h-7.85l.849-5.93c6.689-.32 13.51-1.13 16.289-1.49.707-.087 1.211-.73 1.123-1.438 0-.007-.002-.015-.002-.022l-.1-.73c-.016-.121-.127-.206-.246-.19-.002 0-.004 0-.004 0-1.48.2-10 1.32-18.12 1.65-.555.025-1.012.448-1.08 1l-1.049 8.15c-.072.62.371 1.181.99 1.253.029.003.059.006.09.007h9.11v7.76c0 .891-.719 1.615-1.609 1.62h-.391c-.166-.003-.322.076-.42.21l-1.23 1.7c-.088.127-.057.302.07.39.043.031.096.049.15.051h1.84c2.209 0 4-1.791 4-4v-7.731h8.41c.744 0 1.35-.604 1.35-1.35 0-.003 0-.006 0-.001"></path><path d="m167.05 20.09h-1.649c-.457 0-.881.229-1.131.61-1.129 1.75-2.73 4.88-4.301 7.38-.094.15-.047.348.102.441.051.031.109.049.17.049h1.5c.453.004.877-.227 1.119-.61 1.781-2.819 3.439-5.91 4.391-7.51.066-.114.027-.262-.088-.328-.035-.02-.072-.03-.113-.032"></path><path d="m183.82 28.08c-1.57-2.5-3.16-5.63-4.301-7.38-.246-.38-.668-.608-1.119-.61h-1.65c-.127-.006-.234.093-.24.219-.002.051.012.1.039.142.951 1.61 2.611 4.69 4.381 7.51.244.387.672.618 1.131.61h1.5c.17.004.313-.131.316-.303.002-.067-.018-.133-.057-.188"></path></g><path fill="#dd001b" d="M26.26,0H7.74C3.47,0.011,0.011,3.47,0,7.74v18.52C0.011,30.53,3.47,33.988,7.74,34h18.52
c4.271-0.012,7.729-3.47,7.74-7.74V7.74C33.989,3.47,30.53,0.011,26.26,0"></path><path fill="#fff" d="m19.13 19.08c-.297.389-.716.667-1.19.79-.684.202-1.422.077-2-.341-.695-.498-1.137-1.277-1.21-2.129-.041-.43 0-.865.12-1.28.398-1.294 1.373-2.332 2.64-2.81.322-.135.657-.236 1-.3.14.49.28 1 .43 1.51.19.68.39 1.36.55 2 .274.877.13 1.832-.39 2.589m1.32-8.659c-.09-.36-.23-.9-.34-1.3-.085-.308-.085-.632 0-.94.021-.084.055-.166.1-.24.187-.34.518-.575.9-.64.356-.048.716.049 1 .27.144.122.281.252.41.39.229.219.534.34.85.34.696.012 1.27-.542 1.282-1.238 0-.031 0-.062-.0001-.092.0001-.199-.047-.395-.14-.57-.15-.234-.336-.443-.55-.62-.414-.364-.898-.639-1.421-.81-.237-.077-.482-.131-.73-.16-.549-.067-1.105-.012-1.63.16-1.962.59-3.075 2.659-2.485 4.621.014.046.029.093.045.139 0 .21.16.6.21.8-.443.091-.877.219-1.3.38-2 .777-3.533 2.428-4.16 4.48-.191.71-.259 1.447-.2 2.18.136 1.604.97 3.066 2.28 4 2.122 1.465 5.02 1.027 6.61-1 1-1.354 1.326-3.096.87-4.72-.17-.65-.37-1.36-.57-2.06l-.21-.75c.847.217 1.626.639 2.27 1.23 2.236 2.188 2.652 5.634 1 8.29-1.592 2.416-4.296 3.864-7.19 3.85-4.926-.001-8.915-4-8.92-8.93-.0001-.438.032-.876.1-1.31.055-.337.128-.671.22-1 .1-.34.21-.67.34-1 .137-.318.291-.628.46-.93.164-.302.348-.592.55-.87.203-.278.419-.545.65-.8.232-.252.479-.489.74-.71.25-.22.53-.43.81-.63.284-.192.578-.369.88-.53.17-.08.34-.17.51-.24l.28-.12c.654-.273.963-1.026.69-1.68s-1.026-.963-1.68-.69l-.36.15-.66.32c-.392.201-.769.429-1.13.68-.347.249-.681.516-1 .8-.33.289-.644.596-.94.92-.3.313-.578.647-.83 1-.276.36-.53.738-.76 1.13-.217.39-.414.791-.59 1.2-.169.414-.313.838-.43 1.27-.126.439-.223.887-.29 1.34-.088.559-.131 1.124-.13 1.69-.028 6.324 5.076 11.473 11.4 11.5.001 0 .02 0 .03 0 3.753.001 7.26-1.869 9.33-5 2.308-3.669 1.714-8.456-1.42-11.45-1.291-1.192-2.947-1.915-4.7-2.05"></path></svg></span>
          <span class="right" :class="{ isPlay: isPused }"></span>
        </div>
        <div class="rotate-pic">
          <div class="rotate-disc">
            <div class="rotate-trun">
              <div class="rotate-rollwrap">
                <div ref="rotateImg" class="rotate-img" >
                  <img :src="song.al.picUrl" >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="lrc-bg"
        :style="{
          background: 'url(' + song.al.picUrl + ') no-repeat',
          backgroundSize: '100% 100%',
          filter: 'blur(10px)',
        }"
      ></div>
      <div class="lrc-play">
        <div class="play-bar">
          <div class="bar-left">
            <span>{{ currentTime | formatTime }}</span>
          </div>
          <div class="bar-middle">
            <div class="progress">
              <div class="line" :style="{width:length}"></div>
              <div class="bar"></div>
            </div>
          </div>
          <div class="bar-right">
            <span>{{ durationTime | formatTime }}</span>
          </div>
        </div>
        <div class="play-console">
          <div class="cle-loop">
            <span></span>
          </div>
          <div class="cle-prev">
            <span></span>
          </div>
          <div class="cle-play">
            <span @click="togglePlay" :class="{ isPlay: isPused }"></span>
          </div>
          <div class="cle-next">
            <span></span>
          </div>
          <div class="cle-playList">
            <span></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["musicID"],
  data() {
    return {
      song: {
        al: {
          picUrl: "",
        },
        name: null,
        ar: [{ name: "" }],
      },
      lrcArr: [],
      isPused: false,
      isFullLrc: false,
      showRotate:false,
      lrcCurrent: 0,
      currentTime: 0,
      durationTime: 0,
      length:0
    };
  },
  watch: {
    musicID(val) {
      this.$http.get("/song/detail?ids=" + val).then((data) => {
        this.song = data.data.songs[0];
        this.isPused = true;
      });
      this.$http.defaults.baseURL = "http://music.kele8.cn";
      this.$http.get("/lyric?id=" + val).then((lrcdata) => {
        let lrc = lrcdata.data.lrc.lyric;
        let lrcArr = lrc.split(/\n/);
        let reg = /\[(\d+):(\d+\.\d+)\](.+)/;
        this.lrcArr = lrcArr.map((lc) => {
          reg.test(lc);
          return {
            time: parseInt(RegExp.$1 * 60) + parseFloat(RegExp.$2),
            lyric: RegExp.$3,
          };
        });
      });
      this.$http.defaults.baseURL = "http://musicapi.leanapp.cn/";
      return val;
    },
  },
  methods: {
    togglePlay() {
      if (this.$root.playingMusic.isPlay) {
        this.$root.playingMusic.isPlay = false;
        this.isPused = false;
        this.$refs.musicplayer.pause();
        this.$refs.rotateImg_play.style.animationPlayState = "paused";
        this.$refs.rotateImg.style.animationPlayState = "paused";
      } else {
        this.$root.playingMusic.isPlay = true;
        this.isPused = true;
        this.$refs.musicplayer.play();
        this.$refs.rotateImg_play.style.animationPlayState = "running";
        this.$refs.rotateImg.style.animationPlayState = "running";
      }
    },
    showFull() {
      this.isFullLrc = true;
    },
    toggleRotate(){
      this.showRotate = true;
    },
    timeupdate(event) {
      let audio = event.target;
      let currentTime = audio.currentTime;
      let durationTime = audio.duration;
      for (var i in this.lrcArr) {
        let lrcTime = this.lrcArr[i].time;
        var i2 = parseInt(i) + 1;
        if (currentTime >= lrcTime && currentTime < this.lrcArr[i2].time) {
          this.lrcCurrent = i;
          break;
        }
      }
      this.drawCirle(currentTime, durationTime);
      this.currentTime = currentTime;
      this.durationTime = durationTime;
      this.length = parseInt((currentTime / durationTime) *100) + "%";
    },
    drawCirle(c, d) {
      let canvas = this.$refs.canvas;
      let cxt = canvas.getContext("2d");
      cxt.beginPath();
      cxt.strokeStyle = "#ccc";
      cxt.arc(25, 25, 20, 0, Math.PI * 2);
      cxt.stroke();
      cxt.closePath();

      cxt.beginPath();
      cxt.strokeStyle = "#000";
      cxt.arc(25, 25, 20, 0, Math.PI * 2 * (c / d));
      cxt.stroke();
      cxt.closePath();
    },
  },
  filters: {
    formatTime(value) {
      let h = parseInt(value / 3600);
      let m = parseInt((value % 3600) / 60);
      let s = parseInt(value % 60);
      return (
        (h < 10 ? "0" + h : h) +
        ":" +
        (m < 10 ? "0" + m : m) +
        ":" +
        (s < 10 ? "0" + s : s)
      );
    },
  },
};
</script>
<style lang="less" scoped>
.play {
  width: 100%;
  height: 50px;
  border-top: 1px solid #ccc;
  background-color:#888;

  .playBar {
    display: flex;
    i {
      display: inline-block;
      color: #000;
      &:first-of-type {
        width: 50px;
        height: 50px;
        margin-left: 5px;
        border-radius: 50%;
        .imgRoteta{
          width: 50px;
          height: 50px;
          border-radius: 50%;
          overflow: hidden;
          animation: rotateImg 6s linear 0s infinite;
        }
        img {
          display: block;
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      &:nth-of-type(2) {
        flex: 1;
      }
      &:last-child {
        width: 50px;
        height: 50px;
        position: relative;
        canvas {
          position: absolute;
          top: 0;
          right: 0;
        }
        span {
          position: absolute;
          top: 25px;
          left: 25px;
          width: 25px;
          height: 25px;
          transform: translateX(-50%) translateY(-50%);
          background: url(../assets/icon_play.png) no-repeat;
          background-size: 25px;
          &.pused {
            background: url(../assets/iconstop.png) no-repeat;
            background-size: 25px;
          }
        }
      }
    }
  }
  .fullLrc {
    width: 100vw;
    height: 100vh;
    background-color: #000;
    color: white;
    transition: all 1s;
    position: relative;
    .lrc-bg {
      width: 100vw;
      height: 100vh;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -999;
    }
    &.showFuulrc {
      transform: translateY(-100vh);
    }
    &.hidFull {
      transform: translateY(100vh);
    }
    .lrc-top {
      height: 30px;
      padding: 10px;
      display: flex;
      span {
        display: inline-block;
      }
      .lrc-back {
        width: 25px;
        height: 25px;
        margin: 5px;
        background: url(../assets/fanhui.png) no-repeat;
        background-size: 25px;
      }
      h3 {
        flex: 1;
        margin-top: 5px;
      }
      .lrc-more {
        width: 25px;
        height: 25px;
        margin: 5px;
        background: url(../assets/share_icon.png) no-repeat;
        background-size: 25px;
      }
    }

    .lrc {
      position: relative;
      width: 100%;
      height: 80vh;
      overflow: hidden;
      div {
        position: absolute;
        height: 30vh;
        width: 100vw;
        margin: 45vh auto;
        color: white;
        ul {
          list-style: none;
          li {
            // height: 25px;
            &.active {
              color: rgb(91, 195, 236);
            }
          }
        }
      }
    }
    .lrc-rotate{
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      .rotate-top{
        text-align: left;
        position: relative;
        .left{
          display: inline-block;
          width: 80px;
          padding-left: 10px;
        }
        .right{
          position: absolute;
          top: 0;
          left: 50%;
          width: 96px;
          height: 136px;
          background: url(../assets/needle-ip6.png) no-repeat;
          background-size: 96px 136px;
          transform-origin: top left ;
          transform: rotate(-25deg);
          transition: all 1s;
          &.isPlay{
            transform: rotate(0deg);
          }
        }
      }
      .rotate-pic{
        width: 100vw;
        height: 300px;
        padding-top: 50px;
        .rotate-disc{
          width: 300px;
          height: 300px;
          margin: 0 auto;
          background: url(../assets/play_bg.png) no-repeat;
          background-size: contain;
          .rotate-trun{
            width: 200px;
            height: 200px;
            margin: 0 auto;
            padding-top: 50px;
            .rotate-rollwrap{
              width: 200px;
              height: 200px;
              overflow: hidden;
              border-radius: 50%;
              .rotate-img{
                width: 200px;
                height: 200px;
                animation: rotateImg 6s linear 0s infinite;
                img{
                  display: block;
                  width: 100%;
                  height: 100%; 
                  border-radius: 50%;
                }
              }
            }
          }
        }
      }
    }
    .lrc-play {
      position: fixed;
      bottom: 0;
      width: 100vw;
      height: 75px;
      background-color: rgba(136, 136, 136, 0.1);
      // opacity: 0.8;
      .play-bar {
        display: flex;
        height: 20px;
        span {
          font-size: 10px;
          line-height: 20px;
        }
        .bar-left {
          width: 50px;
          padding: 0 5px;
        }
        .bar-middle {
          flex: 1;
          // width: 100%;
          position: relative;
          .progress {
            width: 100%;
            height: 2px;
            border-radius: 3px;
            overflow: hidden;
            background-color: #000;
            margin: 9px 0;
            cursor: pointer;
            position: absolute;
            .line {
              width: 10px;
              height: 100%;
              background-color: #fff;
              position: absolute;
              top: 0;
              left: 0;
            }
            .bar {
              width: 100%;
              height: 100%;
              opacity: 0.3;
              background-color: #ccc;
              position: absolute;
              left: 0;
              top: 0;
              z-index: 1;
            }
          }
        }
        .bar-right {
          width: 50px;
          padding: 0 5px;
        }
      }
      .play-console {
        width: 80%;
        height: 50px;
        display: flex;
        margin: 0 auto;
        margin-bottom: 5px;
        justify-content: space-around;
        span {
          display: inline-block;
          margin-top: 12.5px;
        }
        .cle-loop {
          span {
            width: 25px;
            height: 25px;
            background: url(../assets/xunhuan.png) no-repeat;
            background-size: 25px;
          }
        }
        .cle-prev {
          span {
            width: 25px;
            height: 25px;
            background: url(../assets/shangyiqu101.png) no-repeat;
            background-size: 25px;
          }
        }
        .cle-play {
          border: 1px solid #fff;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          box-sizing: border-box;
          span {
            width: 30px;
            height: 30px;
            background: url(../assets/icon_play.png) no-repeat;
            background-size: 30px;
            margin: 9px;
            &.isPlay {
              background: url(../assets/zanting.png) no-repeat;
              background-size: 30px;
            }
          }
        }
        .cle-next {
          span {
            width: 25px;
            height: 25px;
            background: url(../assets/xiayiqu101.png) no-repeat;
            background-size: 25px;
          }
        }
        .cle-playList {
          span {
            width: 25px;
            height: 25px;
            background: url(../assets/bofangliebiao.png) no-repeat;
            background-size: 25px;
          }
        }
      }
    }
  }
}
@keyframes rotateImg {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>